
//trim 
String.prototype.trim = function(){ 
    return this.replace(/(^\s*)|(\s*$)/g, ""); 
} 

function goodEditor(id){

    this.id=id;
    this.init();
    var o=this;
    //经测试，此处chrome和firefox有差异
   
    if(goodEditor.getBroswer()=='chrome'){
        window.frames[this.id].document.body.onload=function(){
            o.pTag();   
        }
    }
    else{
        window.frames[this.id].onload=function(){
            //o.pTag();   
        }
    }
    
        

}


goodEditor.version="beta1.0"

goodEditor.getBroswer=function (){ 
    var OsObject = ""; 
    if(navigator.userAgent.indexOf("MSIE")>0) { 
        return "MSIE"; 
    } 
    if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
        return "Firefox"; 
    }
    if(isSafari=navigator.userAgent.indexOf("Chrome")>0) { 
        return "Chrome"; 
    }  
    if(isSafari=navigator.userAgent.indexOf("Safari")>0) { 
        return "Safari"; 
    }  
    if(isCamino=navigator.userAgent.indexOf("Camino")>0){ 
        return "Camino"; 
    } 
    if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ 
        return "Gecko"; 
    } 

};
//着色器
goodEditor.popColorBox=function(o,instance,f){

   var of=o.offset();
   $('#color').css('top',of.top+20);
   $('#color').css('left',of.left);
   $('#color').fadeIn(500); 
   $('#color div').unbind();
   $('#color div').click(function(){
        var color=$(this).html().trim();;
        if(color!='取消'){
            f(instance,color);
            }
        $('#color').fadeOut(500); 
        return false;
   });
   $('#color div').hover(
    function(){
        
    $(this).addClass('color-div-hover');
    $(this).removeClass('color-div');
    },
    function(){
   
    $(this).removeClass('color-div-hover');
    $(this).addClass('color-div');
   
   });
    
}

goodEditor.prototype.init=function(){
    //视图区高和宽初始化
    this.w=$("#"+this.id).width();
    this.h=$("#"+this.id).height();
    //生成工具栏
    var buttons=new Array();
    //buttons[i][0]='命令名' buttons[i][1]='位置'  buttons[i][1]='对应方法'
    buttons[0]=new Array();
    buttons[0][0]='前景色';
    buttons[0][1]='8';
    buttons[0][2]=this.fontColor;
    buttons[1]=new Array();
    buttons[1][0]='背景色';
    buttons[1][1]='9';
    buttons[1][2]=this.backColor; 
    buttons[2]=new Array();
    buttons[2][0]='加粗';
    buttons[2][1]='10';
    buttons[2][2]=this.bold; 
    buttons[3]=new Array();
    buttons[3][0]='斜体';
    buttons[3][1]='11';
    buttons[3][2]=this.italic; 
    buttons[4]=new Array();
    buttons[4][0]='下划线';
    buttons[4][1]='12';
    buttons[4][2]=this.underLine; 
    buttons[5]=new Array();
    buttons[5][0]='html源码切换';
    buttons[5][1]='0';
    buttons[5][2]=this.html; 
    buttons[6]=new Array();
    buttons[6][0]='居左';
    buttons[6][1]='1';
    buttons[6][2]=this.left;; 
    buttons[7]=new Array();
    buttons[7][0]='居中';
    buttons[7][1]='2';
    buttons[7][2]=this.center;
    buttons[8]=new Array();
    buttons[8][0]='居右';
    buttons[8][1]='3';
    buttons[8][2]=this.right;
    buttons[9]=new Array();
    buttons[9][0]='撤销';
    buttons[9][1]='5';
    buttons[9][2]=this.undo;
    buttons[10]=new Array();
    buttons[10][0]='重做';
    buttons[10][1]='6';
    buttons[10][2]=this.redo
    buttons[11]=new Array();
    buttons[11][0]='range测试';
    buttons[11][1]='14';
    buttons[11][2]=this.rangeTest;
    buttons[12]=new Array();
    buttons[12][0]='插入图片';
    buttons[12][1]='15';
    buttons[12][2]=this.insertPic;
    var o=this;
    for(var i=0;i<buttons.length;i++){
        var str="<span id='tool-item-"+i+"' unselectable='on' title='"+buttons[i][0]+"'  class='tool-item' style='background:url(images/ico.png) 0px "+(-buttons[i][1]*16)+"px;'></span>";

        $('#tool-bar').append(str);
        //click闭包问题
        (function(arg){
            $('#tool-item-'+arg).click(function(){
                var f=buttons[arg][2];
                f.call(o,this);
            });
        })(i);


    }
    $('#tool-bar span').hover(
        function(){
            $(this).addClass('tool-item-hover'); 
            $(this).removeClass('tool-item')
        },
        function(){
            $(this).removeClass('tool-item-hover')
            $(this).addClass('tool-item'); 
        
        }
    );
}
goodEditor.prototype.getContent=function(){

    this.fd=window.frames[this.id].document;
    return this.fd.body; 

}
goodEditor.prototype.createRange=function(){
    if(goodEditor.getBroswer()=="MSIE"){
        return this.fd.body.createTextRange(); 
    }    
    else{
        return this.fd.createRange(); 
    }
}
goodEditor.prototype.execCommand=function(command,args){
    args=args||null;
    this.fd=window.frames[this.id].document;
    this.getContent().focus();
    this.fd.execCommand(command,false,args);
    this.getContent().focus();
}

//字体颜色
goodEditor.prototype.fontColor=function(o){
    goodEditor.popColorBox($(o),this,function(o,color){
        o.execCommand('ForeColor',color); 
    });
}
//背景色
goodEditor.prototype.backColor=function(o){
    goodEditor.popColorBox($(o),this,function(o,color){

        if(goodEditor.getBroswer()=="Firefox"){
            o.execCommand('hilitecolor',color);  
        }
        else{
            o.execCommand('BackColor',color);  
            
        }
    });
}
//加粗
goodEditor.prototype.bold=function(){
        this.execCommand("bold");
}

goodEditor.prototype.underLine=function(){
        this.execCommand("underLine");
}
goodEditor.prototype.italic=function(){
        this.execCommand("italic");
}
goodEditor.prototype.ol=function(){

        this.execCommand('InsertOrderedList'); 
}
goodEditor.prototype.ul=function(){
        this.execCommand('InsertUnorderedList');
}
//缩进firefox下有bug
goodEditor.prototype.ulc=function(){
    this.execCommand('Indent');
}
//p换行
goodEditor.prototype.pTag=function(){
       this.execCommand('formatBlock','p')  
}

goodEditor.prototype.fontSize=function(){
   this.execCommand('FontSize',72);
}
//html
goodEditor.prototype.html=function(){
    
        $("#editor_textarea").toggle();
        $("#"+this.id).toggle();    
    if($("#editor_textarea").css('display')=='none'){

        this.getContent().innerHTML=$("#editor_textarea").val();
        $(this.getContent()).width(this.w-22);
        $(this.getContent()).height(this.h-22);
        $("#tool-item-5").css('position','static');
        $("#shadow").hide()
    }
    else{
        $("#editor_textarea").val(this.getContent().innerHTML);
        $("#editor_textarea").width(this.w-2);
        $("#editor_textarea").height(this.h-2);
        var sw=$("#tool-bar").width()+4;
        var sh=$("#tool-bar").height()+4;
        var of=$("#tool-bar").offset();
        $("#shadow").css('top',of.top);
        $("#shadow").css('left',of.left);
        $("#shadow").width(sw);
        $("#shadow").height(sh);
        $("#tool-item-5").css('position','relative');
        $("#tool-item-5").css('z-index',1000);
        $('#color').fadeOut(500); 
        $("#shadow").show()
    }
}
goodEditor.prototype.left=function(){

   this.execCommand('justifyLeft');
      
}
goodEditor.prototype.center=function(){
   this.execCommand('justifyCenter');
}
goodEditor.prototype.right=function(){
   this.execCommand('justifyRight');
}
goodEditor.prototype.undo=function(){
   this.execCommand('undo');
}
goodEditor.prototype.redo=function(){
   this.execCommand('redo');
}
goodEditor.prototype.insertPic=function(o){
    var l=$(window).width()/2-100;
    var t=$(o).offset();
    t=t.top+50;
    $('#pic').css('left',l);
    $('#pic').css('top',t);
    $('#pic').fadeIn(500);
    var o=this;
    $("#insertImage").unbind();
    $("#cancelImage").unbind();
    $("#insertImage").click(function(){
        var url=$("#picurl").val()+"";
        url=url.trim();
        if(url!=null){
            o.execCommand('insertImage',url);
            $('#pic').fadeOut(500);
        }
        else{
            alert("需输入图片地址"); 
        }
    });
    $("#cancelImage").click(function(){
            $('#pic').fadeOut(500);
    });
}
goodEditor.prototype.rangeTest=function(){

    var sel=window.frames[this.id].getSelection();
    console.log(sel);
    var range=sel.getRangeAt(0);
    var newNode = document.createElement("img"); 
    newNode.style.float='left';
    newNode.style.margin='2px';
    newNode.setAttribute('src','http://www.21huazhuang.com/uploadfile/picture/2009-11-26/20091126133439621_10271_big_1.jpg');
    //range.insertNode(newNode);
    var n=range.endContainer;
        n=goodEditor.getBroswer=='Chrome'?n.parentNode:n; 
    $(n).css('line-height','10em');
    alert(n);
    console.log(n);
    $("img",this.fd).click(function(){
        $(this).css('float','left'); 
    
    });

}
